$(function () {
    // ### 全部变量
 
    // ### 和后端交互

    // ### 门店放大镜切换
    $('.store .d-right ul').on('click', 'li', function () {
        $('.big .imgbox img').attr('src', $(this).find('img').attr('src'))
    })

    // ### 飞入购物车 start
    $('.allgoods').on('click', '.buy', function (e) {
      let uname = localStorage.getItem('uname')
      if(!uname)return;
        // 收集数据
        let endObj = document.querySelector('.guess-you-like h4')
        let goods_img = $(this)
            .parents('.goods')
            .find('.imgbox img')
            .attr('src')
        let goods_name = $(this).parents('.goods').find('.name span').text()
        let goods_price = $(this).parents('.goods').find('.price font').text()
        let goods_price2 = $(this).parents('.goods').find('.price span').text()
        let goods_id = $(this).parents('.goods').attr('id')
        // 飞图片
        let flyer = $(`<img class="flyer" src="${goods_img}"/>`)
        // 起飞
        flyer.fly({
            start: {
                left: e.clientX - 788,
                top: e.clientY,
            },
            end: {
                left: endObj.offsetLeft,
                top: endObj.offsetTop - document.documentElement.scrollTop,
                width: 20,
                height: 20,
            },
            onEnd: () => {
                // alert('ok')
                $('.flyer').remove()

                if ($('.mofakoudai').find(`.goods${goods_id}`).length) {
                    // 累计+1
                    console.log(1)
                    let data = $('.mofakoudai')
                        .find(`.goods${goods_id} button font`)
                        .text()
                    $('.mofakoudai')
                        .find(`.goods${goods_id} button font`)
                        .text(parseInt(data) + 1)
                } else {
                    // 新增
                    console.log(1)
                    $('.mofakoudai').prepend(`
                  <li class="goods${goods_id}">
                      <div class="pic">
                          <div class="imgbox">
                              <img src="${goods_img}">
                          </div>
                      </div>
                      <p class="name">${goods_name}</p>
                      <p class="desc">门市价<del>￥${goods_price2}</del></p>
                      <p class="price"><b>￥</b>${goods_price} <button>已购<font>1</font></button></p>
                  </li>
              `)
                }
            },
        })
    })
    // 飞入购物车 end
})


//=============
//全局变量
let store_id = getQueryVariable('store_id')

//门店详情
$.get('/api/waimai/goods.jsp', {
  store_id,
}, res => {
  if (res.meta.state == 200) {
    // 一、门店商品信息
    $(".store .name").text(res.data.store.title);
    $(".store .address").html(`<p>
            地址：${res.data.store.address}
          </p>
          <p>
            电话：${res.data.store.tel}
          </p>
          <p>
            营业时间：${res.data.store.work_time}
          </p>`);
    $(".big .imgbox img").attr(
      "src",
      "http://tmp00001.zhaodashen.cn/" + res.data.store.img
    );
    let html = "";
    res.data.store.imgs.split(",").forEach((item) => {
      html += `
      <li>
        <div class="imgbox" style="height: 100%; width: 100%;">
          <img src="http://tmp00001.zhaodashen.cn/${item}">
        </div>
      </li>`;
    });
    $(".store .d-right ul").html(html);

    // 二、门店商品列表
    // 1 清空 放h4 <h4>欢迎光临O(∩_∩)O哈哈~ 客官</h4>
    $(".allgoods").html("<h4>欢迎光临O(∩_∩)O哈哈~ 客官</h4>");
    // 2 遍历 && 追加
    $.each(res.data.goods, (index, item) => {
      let html = `<div class="goods" id="${item.goods_id}">
          <div class="one clear">
            <div class="pic">
              <div class="imgbox">
                <img
                  src="http://tmp00001.zhaodashen.cn/${item.goods_img}?imageView2/1/w/100/h/100/format/jpg/q/75|watermark/2/text/5Y2D6ZSL56We6b6Z5pWZ5Li7/font/5a6L5L2T/fontsize/240/fill/I0ZGRkRGRA==/dissolve/76/gravity/South/dx/10/dy/10">
              </div>
            </div>
            <div class="info">
              <a class="fr buy" href="javascript:;">加入购物车</a>
              <p class="name"><span>${item.goods_name}</span></p>
              <p class="price">
                <b>￥</b>
                <font>${item.shop_price}</font>
                <span>门市价￥${item.market_price}</span>
              </p>
            </div>
          </div>
          <div class="line"></div>
        </div>`;
      // 追加
      $(".allgoods").append(html);
    });
    //console.log(res.data);
    //门店商品列表
    //清空 放h4 
    $('.allgoods').html('<h4>欢迎光临O(∩_∩)O哈哈~ 客官</h4>')
    $.each(res.data.goods, (index, item) => {
      //console.log(item);
      let html = `
      <div class="goods" id="${item.goods_id}">
              <div class="one clear">
                <div class="pic">
                  <div class="imgbox">
                    <img
                      src="http://tmp00001.zhaodashen.cn/${item.goods_img}" />
                  </div>
                </div>
                <div class="info">
                  <a class="fr buy" href="javascript:;">加入购物车</a>
                  <p class="name">
                    <span>${item.goods_name}</span>
                  </p>
                  <p class="price">
                    <b>￥</b>
                    <font>${item.shop_price}</font>
                    <span>门市价￥${item.market_price}</span>
                  </p>
                </div>
              </div>
              <div class="line"></div>
            </div>
      `
      $('.allgoods').append(html)
    })
  } else {
    cocoMessage.error(res.meta.msg);
    setTimeout(() => {
      //location.href = './index.html'
    }, 2000)
  }
  //console.log(res);
}, 'json')


//加入购物车
/* console.log(store_id);
console.log(token);
console.log(uname); */
//事件委托绑定点击事件
$('.allgoods').on('click', '.buy', function () {
  //根据token判断是否登录
  if (!token) {
    //有 就不管  没有 弹框提示
    cocoMessage.error('请登录再进行购买');
    return;
  }
  let goodsId = $(this).parents('.goods').attr('id')
  // 获取参数 请求接口
  $.post('/api/carts/create.jsp', {
    //成功不管
    //失败弹框提示
    token,
    buyNum: 1,
    goodsId,
  }, res => {
    if (res.meta.state !== 201) {
      cocoMessage.error(res.meta.msg);
    }
  },'json')
})

//门店购物车
$.get('/api/carts/store.jsp', { token, store_id }, res => {
  //console.log(res);
  //清空
  $('.mofakoudai').text('')
  //遍历
  $.each(res.data, (index, item) => {
    let html = `
    <li class="goods${item.goods_id}">
        <div class="pic">
          <div class="imgbox">
            <img
              src="http://tmp00001.zhaodashen.cn/${item.imgs.goods_img}?imageView2/1/w/188/h/108/format/jpg/q/75|watermark/2/text/5Y2D6ZSL56We6b6Z5pWZ5Li7/font/5a6L5L2T/fontsize/240/fill/I0ZDRkJGQg==/dissolve/100/gravity/South/dx/10/dy/10">
          </div>
        </div>
        <p class="name">${item.goods_name}</p>
        <p class="desc">门市价<del>￥${item.market_price}</del></p>
        <p class="price"><b>￥</b>${item.shop_price} <button>已购<font>${item.goods_number}</font></button></p>
      </li>
  `
    //追加
    $('.mofakoudai').append(html)
  })
}, 'json')
